<template>
    <div class="preview-content">
      <div class="paper-header">
        <h1>{{ paper.name }}</h1>
        <div class="paper-info">
          <span>难度: {{ getDifficultyLabel(paper.difficulty) }}</span>
          <span>题目数量: {{ questions.length }}</span>
          <span>总分: {{ questions.reduce((sum, q) => sum + (q.score || 0), 0) }}</span>
        </div>
      </div>
      
      <div class="questions-preview">
        <template v-if="paper.typeSet === 'auto'">
          <!-- 按题型分类显示 -->
          <div v-for="type in questionTypes" :key="type.value" class="question-type-section">
            <h3 v-if="getQuestionsByType(type.value).length > 0">
              {{ type.label }}（共{{ getQuestionsByType(type.value).length }}题）
            </h3>
            <div v-for="(question, qIndex) in getQuestionsByType(type.value)" 
                  :key="question.id" 
                  class="preview-question-item">
              <div class="question-header">
                <span class="question-index">第{{ qIndex + 1 }}题</span>
                <span class="question-score">({{ question.score || 0 }}分)</span>
              </div>
              <div class="question-content">
                <!-- 综合题 -->
                <template v-if="question.questionType === 'READING'">
                  <div class="question-passage">{{ question.passage }}</div>
                  <div v-for="(subQ, subIndex) in question.subQuestions" 
                      :key="subIndex" 
                      class="sub-question">
                    <div class="sub-question-header">
                      <span class="sub-question-index">第{{ subIndex + 1 }}小题</span>
                      <span class="sub-question-score">({{ subQ.score || 0 }}分)</span>
                    </div>
                    <div class="sub-question-stem">{{ subQ.stem }}</div>
                    <!-- 子题目选项 -->
                    <div v-if="['SINGLE_CHOICE', 'MULTIPLE_CHOICE'].includes(subQ.questionType)" 
                        class="options-list">
                      <div v-for="option in subQ.options" 
                          :key="option.optionId" 
                          class="option-item">
                        <span class="option-id">{{ option.optionId }}.</span>
                        <span class="option-content">{{ option.content }}</span>
                      </div>
                    </div>
                  </div>
                </template>
                <!-- 普通题目 -->
                <template v-else>
                  <div class="question-stem">{{ question.stem }}</div>
                  <!-- 选项区域 -->
                  <div v-if="['SINGLE_CHOICE', 'MULTIPLE_CHOICE'].includes(question.questionType)" 
                      class="options-list">
                    <div v-for="option in question.options" 
                        :key="option.optionId" 
                        class="option-item">
                      <span class="option-id">{{ option.optionId }}.</span>
                      <span class="option-content">{{ option.content }}</span>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <!-- 直接显示所有题目 -->
          <div v-for="(question, index) in questions" 
                :key="question.id" 
                class="preview-question-item">
            <div class="question-header">
              <span class="question-index">第{{ index + 1 }}题</span>
              <span class="question-score">({{ question.score || 0 }}分)</span>
            </div>
            <div class="question-content">
              <!-- 综合题 -->
              <template v-if="question.questionType === 'READING'">
                <div class="question-passage">{{ question.passage }}</div>
                <div v-for="(subQ, subIndex) in question.subQuestions" 
                    :key="subIndex" 
                    class="sub-question">
                  <div class="sub-question-header">
                    <span class="sub-question-index">第{{ subIndex + 1 }}小题</span>
                    <span class="sub-question-score">({{ subQ.score || 0 }}分)</span>
                  </div>
                  <div class="sub-question-stem">{{ subQ.stem }}</div>
                  <!-- 子题目选项 -->
                  <div v-if="['SINGLE_CHOICE', 'MULTIPLE_CHOICE'].includes(subQ.questionType)" 
                      class="options-list">
                    <div v-for="option in subQ.options" 
                        :key="option.optionId" 
                        class="option-item">
                      <span class="option-id">{{ option.optionId }}.</span>
                      <span class="option-content">{{ option.content }}</span>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 普通题目 -->
              <template v-else>
                <div class="question-stem">{{ question.stem }}</div>
                <!-- 选项区域 -->
                <div v-if="['SINGLE_CHOICE', 'MULTIPLE_CHOICE'].includes(question.questionType)" 
                    class="options-list">
                  <div v-for="option in question.options" 
                      :key="option.optionId" 
                      class="option-item">
                    <span class="option-id">{{ option.optionId }}.</span>
                    <span class="option-content">{{ option.content }}</span>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  
  const props = defineProps({
    paper: {
      type: Object,
      required: true
    },
    questions: {
      type: Array,
      required: true
    }
  });
  
  // 题目类型选项
  const questionTypes = [
    { value: 'SINGLE_CHOICE', label: '一、单选题' },
    { value: 'MULTIPLE_CHOICE', label: '二、多选题' },
    { value: 'TRUE_FALSE', label: '三、判断题' },
    { value: 'FILL_BLANK', label: '四、填空题' },
    { value: 'SHORT_ANSWER', label: '五、简答题' },
    { value: 'READING', label: '六、综合题' }
  ];
  
  // 获取各个题型的题目列表
  const getQuestionsByType = (type) => {
    const filtered = props.questions.filter(q => q.questionType === type);
    return filtered.sort((a, b) => {
      // 先按难度排序
      if (a.difficulty !== b.difficulty) {
        return a.difficulty - b.difficulty;
      }
      // 难度相同按分数排序
      return (b.score || 0) - (a.score || 0);
    });
  };
  
  // 获取难度显示文本
  const getDifficultyLabel = (difficulty) => {
    const difficultyMap = {
      'easy': '简单',
      'medium': '中等',
      'hard': '困难',
      '1': '简单',
      '2': '中等',
      '3': '困难'
    };
    return difficultyMap[difficulty] || '未知';
  };
  </script>
  
  <style scoped>
  .preview-content {
    padding: 20px;
  }
  
  .paper-header {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .paper-header h1 {
    margin-bottom: 15px;
    font-size: 24px;
    color: #333;
  }
  
  .paper-info {
    display: flex;
    justify-content: center;
    gap: 20px;
    color: #666;
  }
  
  .questions-preview {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 10px;
  }
  
  .question-type-section {
    margin-bottom: 30px;
  }
  
  .question-type-section h3 {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #409EFF;
    color: #409EFF;
    font-weight: 500;
  }
  
  .preview-question-item {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background-color: #fafafa;
  }
  
  .question-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .question-index {
    font-weight: bold;
    color: #409EFF;
  }
  
  .question-score {
    color: #f56c6c;
    margin-left: 10px;
  }
  
  .question-content {
    line-height: 1.5;
  }
  
  .question-passage {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f5f7fa;
    border-left: 3px solid #409EFF;
    border-radius: 2px;
    color: #606266;
  }
  
  .question-stem {
    margin-bottom: 15px;
    font-weight: 500;
  }
  
  .options-list {
    padding-left: 20px;
  }
  
  .option-item {
    margin-bottom: 8px;
    display: flex;
  }
  
  .option-id {
    margin-right: 8px;
    font-weight: 500;
    color: #409EFF;
  }
  
  .sub-question {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ebeef5;
  }
  
  .sub-question-header {
    display: flex;
    margin-bottom: 10px;
  }
  
  .sub-question-index {
    font-weight: 500;
    color: #409EFF;
  }
  
  .sub-question-score {
    color: #f56c6c;
    margin-left: 10px;
  }
  
  .sub-question-stem {
    margin-bottom: 10px;
    font-weight: 500;
  }
  </style>